<template>
    <div>
        <!-- <el-menu router default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" :unique-opened="true">
            <el-submenu v-for=" m of arr" index="m.path" :key="m.id">
                <template slot="title">
                    <i :class="m.icon"></i>
                    <span>{{ m.name }}</span>
                </template>
                <div v-for="m1 of m.children" :key="m1.id">
                    <el-menu-item index="m1.path">
                        <i :class="m1.icon"></i>
                        {{ m1.name }}
                    </el-menu-item>
                </div>
            </el-submenu>
        </el-menu> -->
        <!-- <router-link to="/student/add">学生管理系统</router-link> -->
        <el-menu router default-active="2" class="el-menu-vertical-demo" :unique-opened="true" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b">
            <template v-for="m of arr">
                <el-submenu v-if="m.children" :key="m.id" :index="m.path">
                    <template slot="title">
                        <i :class="m.icon"></i>
                        <span>{{ m.name }}</span>
                    </template>
                    <el-menu-item v-for="m1 of m.children" :key="m1.id" :index="m1.path">
                        <i :class="m1.icon"></i>  {{ m1.name }}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :key="m.id" :index="m.path">
                    <i :class="m.icon"></i>
                    {{ m.name }}
                </el-menu-item>
            </template>
        </el-menu>
        
    </div>
</template>
<script>
// $(function(){

// })
import axios from 'axios'
// import da from "@/json/student.json"
// import da from "@/assets/student"


const options = {
    data() {
        return {
            arr: []
        }
    },
    mounted() {//页面加载完成执行里面的代码
        this.setNavData()
        // this.add()
    },
    methods: {
        async setNavData() {
            // const array = da;
            const arr = await axios.get("http://localhost:1515//xc/nav")

            const da = arr.data.data;
            // 做级别处理
            // console.log(da);
            const map = new Map();//以key，value的形式
            for (const obj of da) {
                map.set(obj.id, obj);
            }
            // console.log(map);
            //通过子对象找到父对象，然后将子对象存入父对象的children
            const top = [];
            for (const obj of da) {
                const parent = map.get(obj.pid);
                if (parent) {
                    // if (parent.children) {
                    //     parent.children.push(obj);
                    // } else {
                    //     parent.children = [];
                    // }
                    parent.children ??= [];
                    parent.children.push(obj);
                } else {
                    top.push(obj);
                }
            }
            // console.log(top);
            this.arr = top;

            // console.log(this.$router.getRoutes());
            // 动态添加路由
            for (const { id, path, view } of da) {
                //  第一个参数，将路由添加到哪里，第二个参数具体路由
                const dir = (path + "").substring(1);
                const aa = dir.split("/")[0]
                // console.log(aa, path);
                // component: () => import("@/views/" + aa + "/AdminView.vue")
                this.$router.addRoute("home", {
                    path: path,
                    name: id,
                    component: () => import(`@/views/${aa}/${view}`)
                });

            }
            // console.log(this.$router.getRoutes());
        },
        async add() {

            // const res = await axios.post("http://127.0.0.1:9000/api/addTask?a:1&b=&&&2", { "task": "1", "time": "fsadf" },{"task": "2", "time": "fsadf"})
            // console.log(res);
        }
    }

}
export default options;
</script>
<style scoped>
.row {
    display: flex;
}
</style>